<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<ui:composition template="./masterpage/masterpage.xhtml">
	<ui:define name="content">
		<div class="title">
			<h2>Transaction Details</h2>
		</div>
		<h:form name="aspnetForm" method="post" id="transactionForm">
			<p class="align-left">
				Select Your Account:
				<h:selectOneMenu value="#{internetTransactionManageBean.accountNumber}">				
					<f:selectItems
						value="#{internetTransactionManageBean.listAccountNumber}" ></f:selectItems>
					<f:ajax event="change" listener="#{customerManageBean.show}" render="transactionForm" />
				</h:selectOneMenu>

			</p>
			<table>
						<tr>
							<th colspan="2">Deposit account information</th>
						</tr>
						<tr>
							<td>
								Account Number
							</td>
							<td>
								<h:outputText value="#{customerManageBean.depToShow.accountNumber}"/>
							</td>
						</tr>
						<tr>
							<td>Balance</td>
							<td>
								<h:outputText value="#{customerManageBean.depToShow.accountBalance}">
									<f:convertNumber currencySymbol="" groupingUsed="true"
                    			 maxFractionDigits="0" type="currency" /></h:outputText>
								VND
							</td>
						</tr>
						<tr>
							<td>Create Date</td>
							<td>
								<h:outputText value="#{customerManageBean.depToShow.createdDate}"/>
							</td>
						</tr>
						<tr>
							<td>Account State</td>
							<td>
								<h:outputText value="#{customerManageBean.depToShow.accountState}"/>
							</td>
						</tr>
			</table>
			<p>
				Select duration
				<h:inputText id="fromDate" value="#{internetTransactionManageBean.fromDate}"
					styleClass="datepicker">
					<f:validator validatorId="durationValidator" />
					<f:attribute name="toDate" value="#{toDate}" />
					</h:inputText>
				To
				<h:inputText id="toDate" value="#{internetTransactionManageBean.toDate}" binding="#{toDate}"
					styleClass="datepicker"></h:inputText>
			</p>
			<h:message for="fromDate" style="color: red;" />
			<p>
				<h:selectBooleanCheckbox
					value="#{internetTransactionManageBean.showOnlyInternetTransaction}"
					id="showInternet"></h:selectBooleanCheckbox>
				<h:outputLabel value="Show only internet transaction"
					for="showInternet"></h:outputLabel>
			</p>
			<p>
				<h:commandButton value="View Transaction"
					action="#{internetTransactionManageBean.searchTransaction}">
				</h:commandButton>
			</p>

			<span class="Warning1"></span>
			



			<h:dataTable value="#{internetTransactionManageBean.transactionList}"
				var="item" styleClass="transactionDetails"
				rendered="#{internetTransactionManageBean.transactionList ne mull}" class="display">
				<h:column>
					<f:facet name="header"> Date </f:facet>
					<h:outputText value="#{item.beginTime}">
						<f:convertDateTime pattern="dd/MM/yyyy"></f:convertDateTime>
					</h:outputText>
				</h:column>

				<h:column>
					<f:facet name="header"> Type </f:facet>
				#{item.transactionType}
			</h:column>
				<h:column>
					<f:facet name="header"> Sender </f:facet>
				#{item.senderID}
			</h:column>
				<h:column>
					<f:facet name="header"> Receiver </f:facet>
				#{item.receiverID}
			</h:column>
				<h:column>
					<f:facet name="header"> Transaction Content </f:facet>
				#{item.content}
			</h:column>
				<h:column>
					<f:facet name="header"> State </f:facet>
				#{item.transactionState}
			</h:column>
				<h:column>
					<f:facet name="header"> Amount </f:facet>
					<h:outputText value="#{item.funds}">
						<f:convertNumber minFractionDigits="0"></f:convertNumber>
					</h:outputText>
				</h:column>
			</h:dataTable>
			<br />
		<script type="text/javascript">
		$(document).ready(function() {
			$(".datepicker").datepicker({
				inline : true,
				showWeek : true,
				firstDay : 1,
				dateFormat : 'dd/mm/yy'
			});
		});
		</script>
		</h:form>
		<h:outputScript library="js">
		<!-- <script charset="utf-8" type="text/javascript"> -->
			$(document).ready(function() {
				$('.display').dataTable({
					"sScrollX" : "100%",
					"sScrollXInner" : "100%",
					"bScrollCollapse" : true,
					"sPaginationType" : "full_numbers",
					"sDom": 'T&lt;"clear"&gt;lfrtip',
					"oTableTools": {
							"sSwfPath": "swf/copy_csv_xls_pdf.swf"
					}
				});
			});
		<!-- </script> -->
		</h:outputScript>
	</ui:define>

</ui:composition>
</html>